<template>
	<div class="app-store">

		<div class="first-page"  v-show="!showAllApps">

			<div class="apps-item my-app">
				<!-- <div class="app-type">我的应用</div> -->
				<a v-for="(app, index) in appsInUse" :href="`//${port}/apps/${app.name}/`" target="_blank" noopener>
					<app-wrapper :app="app" :index="index" added></app-wrapper>
				</a>
			</div>
			<!-- <div class="apps-item my-app">
				<div class="app-type">我的应用</div>
				<a v-for="(app, index) in appsInUse" :href="`/apps/${app.name}`" target="_blank">
					<app-wrapper :app="app" :key="index" added></app-wrapper>
				</a>

				<div class="all-app-wrapper" @click="showAll">
					
					<div class="add-apps" v-if="moreApps">
						<i class="iconfont icon-plus"></i>
					</div>
					<div class="app-option">
						<div class="app-title"> 添加更多应用 </div>
					</div>

				</div>
			</div> -->

			<!-- <div class="apps-item recommend" v-if="appRecommend.length > 0">
				<div class="app-type recommend">推荐应用</div>
				<app-wrapper v-for="(app, index) in appRecommend" :app="app" :key="index" v-on:add-app="appAdded"></app-wrapper>

				<div class="show-all" @click="showAll">
					<i class="iconfont icon-slide-up"></i> 显示所有
				</div>
			</div> -->

			
		</div>
		
		<!-- <transition name="fade">
			<div class="all-apps" v-show="showAllApps">
				<div class="all-title">应用列表</div>
				<div class="close-apps" @click="hideAll"><i class="iconfont icon-close"></i></div>

				<div class="app-classify" v-for="(value, key) in appClassify">
					<div class="app-type">{{key}}</div>
					<app-wrapper v-for="(app, index) in value" :app="app" :key="`${key}-${index}`" v-on:add-app="appAdded"></app-wrapper>
				</div>

			</div>
		</transition> -->

	</div>
</template>

<script>
	import Bus from '@/utils/event_bus'
	import AppWrapper from './app-wrapper'
	import {app as appApi} from '@/api'
	import { appsInUse } from '@/config/config'

	export default{

		name: 'appStore',

		components: {
			AppWrapper
		},

		data (){
			return {
				apps: [],
				// appsInUse: '',
				appsInUse: appsInUse,
				showAllApps: false,
				appClassify: '',
				port: window.location.host
			}
		},

		async mounted () {

			// await this.getMyApps();
			// this.getApps();

			Bus.$emit('on-submenu-change', '');
		},

		activated () {
	        this.$emit( 'on-view-load' );
	    },

	    deactivated () {
	    	this.hideAll();
	    },

	    computed : {
	    	// appRecommend () {
	    	// 	let unUse = this.apps.filter(n => {
	    	// 		return !n.inUse;
	    	// 	})

	    	// 	return unUse.slice(0,3);
	    	// }
	    	
	    	moreApps () {
	    		return this.apps.length != this.appsInUse.length;
	    	}
	    },

		methods: {

			showAll () {
				this.showAllApps = true;
			},

			hideAll () {
				this.showAllApps = false;
			},

			async getMyApps () {

				let result = await appApi.list();

				if (!result || result.data.code != 0) {
					this.$message.error('获取应用列表失败');
					return;
				}

				this.appsInUse = result.data.data;

			},

			async getApps () {

				let result = await appApi.all();

				if (!result || result.data.code != 0) {
					this.$message.error('获取应用失败');
					return;
				}

				this.apps = result.data.data;
				this.classifyApps();

			},

			classifyApps () {

				let apps = this.apps;
				let type = '';
				let obj = {};

				let inUseArray = this.appsInUse.map(m => m.name);

				apps.forEach(n => {

					type = n.app_type;

					this.$set(n, 'inUse', inUseArray.includes(n.name));

					if (obj[type]){
						obj[type].push(n);
					} else {
						obj[type] = [n];
					}

				})
				
				this.appClassify = Object.assign({}, obj);
			},

			appAdded (name) {
				let len = this.apps.length;
				let app = '';

				for (let i = 0; i < len; i++) { 

					app = this.apps[i];

					if (app.name === name) {
						this.appsInUse.push(app);
						this.$set(app, 'inUse', true);
						this.classifyApps();
						break;
					}

				}
			}
		},
	}
</script>

<style lang="scss">

@import 'common';

.app-store {

	height: 100%;
	width: 100%;
	position: relative;
	overflow: auto;
	max-width: 1024px;
    margin: 0 auto;

	.first-page {

		min-height: 100%;
		padding: 36px 48px 0 48px;

		.apps-item {
			
			overflow: hidden;
			padding: 0 0 40px 0;
			// &.my-app {
			// 	padding-bottom: 280px; 
			// }

			// &.recommend {
	  //   		overflow: inherit;
			// 	padding-top: 24px; 
			// 	border-top: 1px solid $gray; 
			// 	position: relative;
			// }

			// .show-all {
			// 	width: 120px;
			// 	padding: 48px 0 36px 0;
			// 	text-align: center;
			// 	margin: 0 auto;
			// 	cursor: pointer;
			// 	color: $gray;
			// 	overflow: hidden;
			// 	clear: both;

			// 	&:hover {
			// 		font-weight: 500;
			// 		color: darken($gray, 10);
			// 	}
			// }
			// 
			// 
			.all-app-wrapper {
				width: 230px;
				height: 90px;
				position: relative;
			    float: left;
			    padding: 10px;
			    display: block;
			    cursor: pointer;

				.add-apps {
					width: 70px;
					height: 70px;
					border: 1px solid #c7c7c7;
	    			border-radius: 3px;
	    			float: left;
	    			text-align: center;
	    			line-height: 68px;

	    			i {
	    				font-size: 28px;
	    				font-weight: bold;
	    				color: $gray;
	    			}

	    			&:hover {

	    				& >i{
	    					color: darken($gray, 10%);
	    				}
	    			}
				}
			}
		}
	}

	.all-apps {
		overflow: hidden;
		position: absolute;    
		padding: 24px;
		top: 0;
	    background: #fff;
	    min-height: 100%;
	    width: 100%;

	    .all-title {
	    	font-size: $fontSizeBase;
			color: $gray;
			padding: 0 10px 16px 10px;
			margin-bottom: 24px;
			border-bottom: 1px solid $gray;
	    }

	    .close-apps {
	    	position: absolute;
	    	top: 24px;
	    	right: 34px;
	    	cursor: pointer;

	    	>i {
	    		font-size: 18px;
	    	}

	    	>i:hover {
	    		font-weight: 500;
	    		color: $info;
	    	}
	    }

	    .app-classify {
	    	overflow: hidden;
	    	padding-bottom: 36px;
	    }
	}
}

.app-type {
	padding: 0 10px;
	font-size: $fontSizeBase;
	color: $gray;
	margin-bottom: 4px;

	&.recommend {
	    width: 80px;
	    position: absolute;
	    background: #fff;
	    top: -11px;
	    text-align: center;
	    margin-left: 50%;
	    transform: translateX(-50%);
	}

}

// .fade-enter-active {
//     transition: all .5s ease;
// }
// .fade-leave-active {
//     transition: all .5s ease;
// }
// .fade-enter, .fade-leave-to {
//   transform: translateY(100%);
//   opacity: 0;
// }
</style>